<template>
	<view class="orderBox" @click="handleOrder">
		<!-- 标题 -->
		<view class="order-title">
			<view :class="['line', item.status ? 'success_line': 'fail_line']"></view>
			<text class="order">{{item.order}}</text>
		</view>

		<!-- 内容 -->
		<view class="order-content">
			<view class="field">
				<text class="contentSize">价格:</text>
				<text class="value contentSize">{{item.price}}</text>
			</view>
			<view class="field">
				<text class="contentSize">创建时间:</text>
				<text class="value contentSize">{{item.createTime}}</text>
			</view>
			<view class="field">
				<text class="contentSize">联系电话:</text>
				<text class="value contentSize">{{item.phone ? item.phone: '' }}</text>
			</view>
		</view>

		<!-- 状态 -->
		<view class="order-status">
			<text :class="['status', item.status ? 'success':'fail' ]">{{item.status ? '已付款':'未付款' }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'record-item',
		props: {
			item: {
				type: Object,
				default: {},
				required: true
			}
		},
		data() {
			return {

			};
		},
		methods: {
			handleOrder() {
				this.$emit("handleOrder");
			}
		}
	}
</script>

<style scoped>
	/* ----------------- */
	.orderBox {
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		border-radius: 15px;
		margin: 10px 0;
		overflow: hidden;
	}

	.orderBox:active {
		background-color: #eaeaea;
	}

	.order-title {
		width: 680rpx;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 15rpx;
		border-bottom-width: 1px;
		border-style: solid;
		border-color: #e2e2e2;
	}

	.line {
		height: 40rpx;
		width: 8rpx;
		border-radius: 10px;
		margin-right: 10rpx;
	}
	.success_line {
		background-color: #28a745;
	}
	.fail_line {
		background-color: #ff0000;
	}

	.order {
		font-size: 16px;
		color: #808080;
	}

	/* ----------------- */


	/* ----------------- */
	.order-content {
		padding: 20rpx;
		width: 680rpx;
	}

	.field {
		flex-direction: row;
		margin: 5px 0px;
	}

	.contentSize {
		font-size: 14px;
	}

	.value {
		margin-left: 10rpx;
		color: #555555;
	}

	/* ----------------- */


	.order-status {
		width: 680rpx;
		flex-direction: row;
		justify-content: center;
		border-top-width: 1px;
		border-style: solid;
		border-color: #e2e2e2;
		padding: 10rpx;
	}

	.status {
		padding: 10rpx;
		border-radius: 10rpx;
		font-size: 16px;
	}

	.success {
		color: #28a745;
	}

	.fail {
		color: #ff0000;
	}
</style>
